<template>
  <div ref="print" class="model-container Details">
    <div class="listName">
      <span>订单信息</span>
      <div class="no-print">
        <el-button size="small" type="primary" plain @click="goBack">返回</el-button>
        <el-button size="small" type="primary" plain @click="print">打印</el-button>
      </div>
    </div>
    <el-card>
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">卖家信息</div>
      </div>
      <div class="cardbody">
        <el-row :gutter="10">
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">会员帐号：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">支付方式：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">抵扣积分：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">优惠券金额：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">积分抵扣金额：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">商品总金额：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">订单应付金额：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">下单时间：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">是否开发票：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">订单实付金额：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">支付状态：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">配送状态：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">配送费用：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">促销优惠金额：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">会员等级优惠：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">买家留言：</div>
            <div class="order_text">123456</div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">订单信息</div>
      </div>
      <div class="cardbody">
        <el-row :gutter="10">
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">订单编号：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">订单编号：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">订单编号：</div>
            <div class="order_text">123456</div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <!--表格-->
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">订单商品</div>
      </div>
      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :stripe="true" :data="dataOption" empty-text="暂无数据">

          <el-table-column align="center" prop="name" label="商品编号"/>

          <el-table-column align="center" prop="address" label="商品图片"/>

          <el-table-column align="center" prop="name" label="商品名称"/>

          <el-table-column align="center" prop="name" label="商品货号"/>

          <el-table-column align="center" prop="name" label="商品规格"/>

          <el-table-column align="center" prop="name" label="品牌"/>

          <el-table-column align="center" prop="name" label="数量"/>

          <el-table-column align="center" prop="name" label="商品单价"/>

          <el-table-column align="center" prop="name" label="条形码"/>

        </el-table>
      </div>
    </el-card>

    <el-card>
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">配送信息</div>
      </div>
      <div class="cardbody">
        <el-row :gutter="10">
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">姓名：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">联系方式：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">邮政编码：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">配送方式：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">收货地址：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">发货时间：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">物流公司：</div>
            <div class="order_text">123456</div>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="12" class="orderobjBox">
            <div class="order_name">快递单号：</div>
            <div class="order_text">123456</div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 列表数据
      dataOption: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市'
      }]
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    print() {
      this.$print(this.$refs.print)
    }
  }
}
</script>
<style type="text/scss" lang="scss" scoped>

</style>
